<template>
  <div class="bg" @scroll="handleScroll($event)">
    <nav ref="navRef" :style="opacityStyle">
      <span @click="outLogin"><img src="../assets/svg/列表.svg" alt=""></span>
      <span></span>
      <span></span>
      <span @click="showPopup"><img src="../assets/svg/登录.svg" alt=""></span>
      <!-- 弹出层 -->
      <van-popup v-model="show" position="right" :style="{ height: '100%', width: '80%'}">
        弹框
      </van-popup>
    </nav>
    <our-card></our-card>
  </div>
</template>
<script>
import ourCard from '../components/CardInfo.vue'
import { Toast } from 'vant'
export default {
  name: 'OursView',
  data () {
    return {
      // 控制导航栏的透明度
      opacityStyle: { opacity: 0.6 },
      show: false,
      value1: '',
      value2: '',
      value3: '',
      pattern: /\d{6}/
    }
  },
  mounted () {
    /* console.log() */
  },
  components: {
    ourCard
  },
  methods: {
    // 退出登录
    outLogin () {
      localStorage.removeItem('token') // 清除登录标志
      this.$router.push('/login') // 跳转到登陆页面
      Toast.success('成功退出')
    },
    handleScroll (e) {
      console.log(e)
      console.log('1')
      /* const top = document.querySelector('.box').scrollTop
      console.log(top) */
    },
    showPopup () {
      this.show = true
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator (val) {
      return /1\d{10}/.test(val)
    },
    // 异步校验函数返回 Promise
    asyncValidator (val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...')

        setTimeout(() => {
          Toast.clear()
          resolve(/\d{6}/.test(val))
        }, 1000)
      })
    },
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    }
  }
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.bg {
  overflow-y: auto;
  width: 100%;
  height: 40rem;
  background-color: #856dff;
}
.bg::-webkit-scrollbar {
  display: none;
}
/* .our-card {
  overflow: auto;
}
.our-card::-webkit-scrollbar {
   display: none;
} */
nav {
  position: sticky;
  width: 100%;
  height: 3rem;
  top: 0;
  left: 0;
  line-height: 4rem;
  background-color: #cfcfc7;
  z-index: 2;
  opacity: 0.3;
}
nav span {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
/*   background-color: green; */
}
nav span img {
  width: 100%;
  height: 100%;
}
span:nth-of-type(1) {
  margin-left: 1.3rem;
}
span:nth-of-type(2) {
  margin-left: 12rem;
}
span:nth-of-type(3), span:nth-of-type(4) {
  margin-left: 1.6rem;
}
</style>
